<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <script src="../lib/17/react.js"></script>
    <script src="../lib/17/react-dom.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
      //1 创建虚拟DOM
      class Life extends React.Component {
        //初始化状态
        state = {
          count: 1,
        };
        addOne = () => {
          let { count } = this.state;
          count += 1;
          this.setState({ count });
        };
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };
        force = () => {
          this.forceUpdate();
        };
        constructor(props) {
          super(props);
          console.log("Life constructor");
        }
        //从props获得一个派生的状态
        // static getDerivedStateFromProps(props) {
        //   console.log("Life getDerivedStateFromProps", props);
        //   return props;
        // }

        render() {
          console.log("Life render");
          const { count } = this.state;
          return (
            <div>
              <h2>当前求和为{count}</h2>
              <button onClick={this.addOne}>+1</button>
              <button onClick={this.death}>卸载组件</button>
              <button onClick={this.force}>强制更新 </button>
            </div>
          );
        }
        //组件挂载完毕
        componentDidMount() {
          console.log("Life componentDidMount");
        }
        //组件将要卸载
        componentWillUnmount() {
          console.log("Life componentWillUnmount");
        }
        //控制组件更新的阀门
        shouldComponentUpdate() {
          console.log("Life shouldComponentUpdate");
          return true;
        }
        //组件将要更新
        getSnapshotBeforeUpdate(){
          console.log('Life getSnapshotBeforeUpdate')
          return 'namesss'
        }
        //组件更新完毕
        componentDidUpdate(preProps,preState,snotshot) {
          console.log("Life componentDidUpdate",preProps,preState,snotshot);
        }
      }
      class A extends React.Component {
        state = {
          carName: "奔驰",
        };
        changeCar = () => {
          this.setState({ carName: "奥拓" });
        };
        render() {
          return (
            <div>
              <div>A</div>
              <button onClick={this.changeCar}>换车</button>
              <B carName={this.state.carName}></B>
            </div>
          );
        }
        //组件将要接收新的props钩子
        componentWillReceiveProps() {
          console.log("A---componentWillReceiveProps");
        }
      }
      class B extends React.Component {
        render() {
          return <div>B组件,{this.props.carName}</div>;
        }
        componentWillReceiveProps() {
          console.log("B---componentWillReceiveProps");
        }
      }
      ReactDOM.render(<Life count={9} />, document.getElementById("test"));
    </script>
  </body>
</html>
